<!--发布任务与通知-->
<template>
    <div>
        <page-header title="发布任务与通知" content="Tasks and notifications" />
        <!--el-row是行、el-col是列
        row组件的:gutter属性来调整布局之间的宽度---分栏间隔，就是每个元素之间隔开多少
        Col组件的:offset属性调整方块的偏移位置（每次1格/24格）
        -->
        <!--
        row组件的type="flex"启动flex布局，再通过row组件的justify属性调整排版方式，属性值分别有:
            justify=center 居中对齐
            justify=start 左对齐
            justify=end 右对齐
            justify=space-between 空格间距在中间对齐
            justify=space-around 左右各占半格空格对齐
                -->
        <el-row>
            <el-col  :xs="24" :sm="12" :md="9" :lg="7" :xl="6">
                <add-task @click.native="addtask"/>
            </el-col>
            <el-col :xs="24" :sm="12" :md="9" :lg="7" :xl="6">
                <add-notification @click.native="addnotice"/>
            </el-col>
        </el-row>

    </div>
</template>

<script>
import 'mavon-editor/dist/css/index.css'
import AddTask from '../../components/AddTask/index'
import AddNotification from '../../components/AddNotification/index'
export default {
    name: 'publish.message',
    components: {
        AddTask,
        AddNotification
    },
    data() {
        return {

        }
    },
    computed: {

    },
    methods: {
        addActive1() {
            this.svg = 'changecolor'
        },
        addActive2() {
            this.svg2 = 'changecolor'
        },
        mouseLeave() {
            this.svg = 'thesvgcolor'
            this.svg2 = 'thesvgcolor'
        },
        addtask() {
            // 跳转路径
            this.$router.push({
                path: '/school/add_task',
                query: {
                    message_type: 'task'
                }
            })
        },
        addnotice() {
            // 跳转路径
            this.$router.push({
                path: '/school/add_task',
                query: {
                    message_type: 'notice'
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .preview {
        margin-top: 10px;
        // 支持数字和字母换行
        word-break: break-all;
        overflow-x: auto;
        overflow-y: auto;
        min-height: 535px;
        max-height: 535px;
        &::before {
            display: block;
        }
    }
    .center {
        text-align: center;
    }
</style>
